<template>
    <view class="shopping_body flex" :style="{height:screenHeight + 'px'}">
        <view class="shopping_title">
            <view class="flex">
                <view class="flex a-item j-center back" @tap="back">
                    <img src="static/image/goBack.png">
                </view>
                <view class="customerName">
                    {{ customer.customerName }}
                </view>
            </view>
            <view style="padding: 10rpx 30rpx">
                <search-input :value.sync="keyword" @change="setKeyword" placeholder="请输入关键字搜索" />
            </view>
        </view>
        <view class="shopping_content flex fl1">
            <!-- <view class="brandList">
                <view v-for="item in brandList" @tap="setBrand(item.id)" class="brandItem flex a-item j-center" :class="params.goodsBrandIds === item.id?'selectBrand':''" :key="item.id">{{ item.name }}</view>
            </view>
            <scroll-view class="goods_list"  scroll-y="true" show-scrollbar="false" @scrolltolower="query.page++">
                <view v-for="item in dataList" @tap="setCurGoods(item)" class="goods_card">
                    <view class="goods_image">
                        <img :src="item.image" alt="">
                    </view>
                    <view class="goods_info">
                        <view class="goods_name">{{ item.goodsName }}</view>
                        <view class="goods_code">编码:{{ item.goodsCode }}</view>
                        <view class="flex" style="margin-top: 15rpx"><view class="goods_code">类型:</view><view class="goods_type">{{ item.giftPromotionInfoList?'买赠':item.goodsTagName }}</view></view>
                    </view>
                </view>
            </scroll-view> -->
            <view class="brandList">
                <view v-for="item in goodsTypeList" @tap="setType(item.id)" class="brandItem flex a-item j-center" :class="params.goodsTypeIds === item.id ? 'selectBrand' : ''" :key="item.id">{{ item.name }} </view>
              </view>
              <scroll-view class="goods_list" scroll-y="true" show-scrollbar="false" @scrolltolower="query.page++">
                <view v-for="item in dataList" @tap="setCurGoods(item)" class="goods_card">
                  <goods-info-card style="width: 100%" :goods="item" />
                </view>
              </scroll-view>
        </view>
        <shopping-cart :type="type"/>
        <!-- <j-popup :show.sync="showSelectGoods">
            <select-goods :customer-id="this.customer.customerId" :promotion="promotion" :tag-list="tagList" :type="type" :goods="curGoods"  @close="showSelectGoods=false"/>
        </j-popup>
        <j-dialog  :show.sync="showPromotionList">
            <view class="promotionList">
                <view class="title flex a-item j-content">促销活动</view>
                <img src="static/image/promotionBg.png" alt="">
                <scroll-view  class="promotionContainer" style="height: 350rpx" scroll-y="true" >
                    <view  v-for="item in promotionList" @click="setPromotion(item)" >
                        <view class="promotion flex flex-row">
                            <radio style="transform:scale(0.7)" value="cb" :checked="promotion.promotionId === item.promotionId" />
                            <view :class="{'orange':promotion.promotionId === item.promotionId}">{{ item.promotionName }}</view>
                        </view>
                    </view>
                </scroll-view>
                <view class="confirm flex a-item j-center" @tap="openSelect">确认</view>
            </view>
        </j-dialog> -->
    </view>
</template>

<script>
import pageMixin from "@/mixins/pageMixin";
import searchInput from "@/components/searchInput.vue";
import {appletBasGoodsBrand, basGoodsListForAdd, basGoodsTagList, getDict} from "@/service/api/common_down";
import {setImage} from "@/common/auth";
import JPopup from "@/components/jPopup.vue";
import SelectGoods from "../../components/selectGoods.vue";
import ShoppingCart from "../../components/shoppingCart.vue";
import JDialog from "@/components/jDialog.vue";

export default {
    name: "shopping",
    mixins: [pageMixin],
    components: {
        ShoppingCart,
        SelectGoods,
        JPopup,
        searchInput,
        JDialog
    },
    data() {
        return {
            keyword: '',
            customer: {customerName:'',customerId:0},
            brandList:[],
            curGoods:{},
            params:{
                goodsBrandIds:1,
                customerId:0,
                type:'SALE',
                isAppletSale:1,
                isIgnoreGiftPromotionInfoList: 0,
                isIgnoreZeroUnGiftGoodsCount: 1,
                scope: 0
            },
            showPromotionList:false,
            showSelectGoods:false,
            type:'cart',
            tagList:[],
            giftPromotionInfoList:[],
            promotionList:[],
            promotion:{},
        }
    },
    created() {
      basGoodsTagList().then(res=>{
            this.tagList =  res.content
        })
        appletBasGoodsBrand({size:999}).then(res=>{
            this.brandList = res.content
        })
    },
    mounted() {
    },
    onLoad(option) {
        this.type = option.type
        if(option.customer){
            this.customer = JSON.parse(option.customer)
            this.params.customerId = this.customer.customerId
            if(this.customer.type === 'buy'){
              this.params.type = 'BUY'
              this.params.buyChannel = 0
              Reflect.deleteProperty(this.params,'isAppletSale')
            }else if(this.customer.type === 'capCart') {
                this.params.goodsTagIds = '4,5'
            }
        }

        if (option.params){
          const params = JSON.parse(option.params)
          this.params = Object.assign(this.params,params)
          this.keyword = params.keyword
        }
        this.onGet()
    },
    methods: {
        searchOrderDetail(e) {

        },
        setPromotion(val){
            this.promotion = val
        },
        openSelect(){
            this.showPromotionList = false
            this.showSelectGoods = true
        },
        setCurGoods(e){
            this.curGoods = e
            this.promotionList=null;
            this.promotion = {promotionId:0};
            if(this.curGoods.giftPromotionInfoList && this.type === 'cart'){
                this.promotionList = this.curGoods.giftPromotionInfoList
                const index = this.promotionList.findIndex(item=>item.promotionId === 0)
                if(!~index){
                    this.promotionList.unshift({promotionId:0, promotionName:"普通商品"})
                }
                this.promotion = this.curGoods.giftPromotionInfoList[0]
                this.showPromotionList = true
                return
            }
            this.showSelectGoods = true
        },
        setBrand(brandId){
            this.params.goodsBrandIds = brandId
            this.query.page = 1
        },
        setKeyword(e){
            this.keyword = e
            this.dataList = []
            this.end = false
            this.query.page = 1
        },
        onGet() {
            const page = this.query.page
            this.params.keyword = this.keyword
            basGoodsListForAdd({...this.query, ...this.params}).then(res=>{
                this.total = res.totalElements
                const _goodsList = res.content.map(item=>{
                    item.image = setImage(item.imageUrl)
                    return item
                })
                if(page === 1)this.dataList =[];
                this.dataList = [...this.dataList,..._goodsList]
            })
        },
        back(){
            history.back()
            // uni.navigateBack({
            //     delta: 1,
            // })
        }
    }
}
</script>
<style scoped lang="scss">
.shopping_body {
    width: 100%;
    flex-direction: column;
    font-family: PingFang SC-Regular, PingFang SC;
	.back {
		width: 50rpx;
		height: 66rpx;

		img {
			width: 40rpx;
			height: 40rpx;
		}
	}
    .shopping_title {
        background: white;
        height: 186 rpx !important;
        padding-top: 88rpx;
        padding-bottom: 20rpx;

        .customerName{
            width: 85%;
            font-size: 36rpx;
            color: #333333;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 500;
        }
    }
  .shopping_content{
      overflow-y: hidden;
      .brandList{
          height: 100%;
          overflow-y: auto;
          background: white;
          .brandItem{
              font-size: 26rpx;
              width: 188rpx;
              height: 106rpx;
              color: #999999;
          }
          .selectBrand{
              background: #F8F8F8;
              color: #016EF9;
          }
      }
      .goods_list{
           height: 100%;
          flex: 1;
          flex-direction: column;
          .goods_card{
              width: 522rpx;
              height: 174rpx;
              background: #FFFFFF;
              box-shadow: 0rpx 3rpx 10rpx 1rpx rgba(0,0,0,0.03);
              border-radius: 10rpx;
              margin: 20rpx auto 0;
              display: flex;
              align-items: center;
              overflow: hidden;
              padding: 12rpx;
              .goods_image{
                  img{
                      width: 150rpx;
                      height: 150rpx;
                      border-radius: 10rpx;
                  }
              }
              .goods_info{
                  height: 100%;
                  margin-left: 12rpx;
                  .goods_name{
                      font-weight: 500;
                      font-size: 28rpx;
                      color: #000000;
                  }
                  .goods_code{
                      color: #999999;
                      font-size: 26rpx;
                      font-weight: 400;
                  }
                  .goods_type{
                      min-width: 79rpx;
                      height: 37rpx;
                      padding: 0 5rpx;
                      border-radius: 6rpx;
                      font-size: 22rpx;
                      font-weight: 500;
                      color: #FFFFFF;
                      display: flex;
                      align-items: center;
                      justify-content: center;
                      margin-left: 10rpx;
                  }
              }
          }
      }
  }
}
.promotionList{
    width: 650rpx;
    height: 600rpx;
    position: relative;
    margin-left: 50rpx;
    img{
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 0;
    }
    .promotionContainer{
        width: 360rpx;
        height: 500rpx;
        position: relative;
        margin: 140rpx auto 0;
        z-index: 5;
    }
    .promotion{
        padding-left: 40rpx;
        font-size: 35rpx;
        padding-top: 30rpx;
        color: #D9EAFF;
    }
    .confirm{
        position: relative;
        z-index: 6;
        width: 380rpx;
        height: 100rpx;
        background: #FFB509;
        color: white;
        border-radius: 100rpx;
        font-size: 35rpx;
        margin: 60rpx 130rpx;
    }
}
</style>
